import React,{Component} from 'react'
import {
    View,
    ListView,
    Text,
    Image,
    StyleSheet
} from 'react-native'

var Dimensions = require('Dimensions')
var {width} = Dimensions.get('window')
export default class TopList extends Component{

    static defaultProps={
        itemData:[]
    }

    constructor(props){
        super(props)
        var dataSource = new ListView.DataSource({rowHasChanged:(row1, row2) => row1 !== row2})

        this.state={
            dataSource:dataSource.cloneWithRows(this.props.itemData)
        }
    }

    render(){
        return(
            <ListView
                contentContainerStyle={styles.listviewStyle}
                dataSource={this.state.dataSource} //这里不能写成this.props.dataSource
                renderRow={this._renderRow}
                scrollEnable={false}
            />
        )
    }

    _renderRow(item) {
        return (
            <View style={styles.itemContainer}>
                <Image source={{uri:'http://localhost:8081/imgs/'+item.image+'.png'}} style={styles.image}></Image>
                <Text style={styles.describe}>{item.title}</Text>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    itemContainer:{
        width:width/5,
        marginTop:10,
        height:70,
        alignItems:'center',
        justifyContent:'center',
    },

    listviewStyle:{
        flexDirection:'row',
        flexWrap:'wrap',
        width:width
    },

    image: {
        height: 45,
        width: 45
    },

    describe: {
    }
})